<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帖子</title>
    <link rel="stylesheet" href="/static/type_post.css">

</head>
<body>
<div class="container">
    <h1 class="page-title">发现优质内容</h1>
    <div class="posts-grid" id="postsGrid">
        <div class="loading">正在加载精彩内容...</div>
    </div>
</div>
</table>
<script>
    function getQueryParam(paramName) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(paramName);
    }

    function renderPosts(posts) {
        const grid = document.getElementById('postsGrid');
        grid.innerHTML = ''; // 清空加载提示

        posts.forEach(post => {
            const card = document.createElement('article');
            card.className = 'post-card';
            card.innerHTML = `
                    <div class="card-image">
                        <img src="${post.imageurl}" alt="${post.title}">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">${post.title}</h3>
                        <p class="card-excerpt">${post.brief}</p>
                        <div class="card-footer">
                            <a href="/api/v1/post/searchpidHTML?id=${post.pid}" class="view-button">
                                <i class="fas fa-arrow-right"></i>
                                查看详情
                            </a>
                        </div>
                    </div>
                `;
            grid.appendChild(card);
        });
    }

    function fetchPosts() {
        const ip = getQueryParam('id');
        const url = `/type/post?id=${ip}`;

        fetch(url)
            .then(response => {
                if (!response.ok) throw new Error('网络响应异常');
                return response.json();
            })
            .then(data => {
                if(data.data && data.data.length > 0) {
                    renderPosts(data.data);
                } else {
                    document.getElementById('postsGrid').innerHTML = `
                            <div class="loading">
                                <i class="fas fa-inbox"></i>
                                <p>暂时还没有内容哦</p>
                            </div>
                        `;
                }
            })
            .catch(error => {
                console.error('获取数据失败:', error);
                document.getElementById('postsGrid').innerHTML = `
                        <div class="loading error">
                            <i class="fas fa-exclamation-triangle"></i>
                            <p>内容加载失败，请稍后再试</p>
                        </div>
                    `;
            });
    }

    window.onload = fetchPosts;
</script>
</body>
</html>
